<template>
  <div class="backimg">
    <div class="titlebar">
      <h3>光影阁照相馆</h3>
      <h1>致力于为顾客提供极致的拍摄体验与优质的摄影服务。</h1>
      <button class="BackBtn" type="button">查看详情</button>
    </div>
  </div>
</template>

<script>

</script>

<style scoped>
h3 {

  margin: 0;
  font-size: 1.5em;
  text-decoration: underline 6px #599fff;

}

h1 {
  margin: 0;
  margin-top: 20px;
  font-size: 2.5em;
}

.backimg {
  height: 100vh;
  background: url('@/assets/images/blue.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
}

.titlebar {
  width: 400px;
  margin-left: 50px;
  color: white;
}
.BackBtn{
  color: white;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 100px;
   padding-right: 100px;
   margin-top: 30px;
    border: 2px solid #fff;
    border-radius: 60px;
    background: none;
    font-size: .9em;
}
.BackBtn:hover{
    color: white;
    background-color: #599fff80;
    transition: background-color 0.5s;
}
</style>